<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Real-Time Log Viewer</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .container {
            max-width: 1200px; /* Make container wider */
            margin: 20px auto;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
            color: #333;
        }
        #logContainer {
            max-width: 100%;
            margin: 0;
            padding: 0;
            background: white;
            border-radius: 8px;
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
            overflow-y: auto;
            height: 70vh; /* Adjust based on your needs */
        }
        .log-line {
            padding: 5px;
            border-bottom: 1px solid #e0e0e0;
            word-wrap: break-word;
        }
        .log-line:last-child {
            border-bottom: none;
        }
        .controls {
            text-align: center;
            margin-bottom: 20px;
        }
        .controls input[type="number"] {
            width: 100px;
            padding: 8px;
            margin-right: 10px;
            font-size: 16px;
        }
        .controls button {
            padding: 8px 16px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="title">实时日志</div>
    <div class="controls">
        频率
        <input type="number" id="intervalInput" value="5" min="1" step="1"> 秒
        <button id="confirmButton">确认</button>
        <button id="pauseButton">暂停</button>
    </div>
    <div id="logContainer"></div>
</div>

<script>
    const logContainer = document.getElementById('logContainer');
    const confirmButton = document.getElementById('confirmButton');
    const pauseButton = document.getElementById('pauseButton');
    let fetchInterval = 5000; // Default to 5 seconds
    let intervalId;
    let isPaused = false;

    function fetchLogs() {
        fetch('/logs')
            .then(response => response.json())
            .then(data => {
                logContainer.innerHTML = ''; // Clear previous logs
                data.forEach(log => {
                    const logElement = document.createElement('div');
                    logElement.textContent = log;
                    logElement.className = 'log-line';
                    logContainer.appendChild(logElement);
                });
                logContainer.scrollTop = logContainer.scrollHeight; // Scroll to the bottom
            })
            .catch(error => console.error('Error fetching logs:', error));
    }

    function startFetchingLogs() {
        fetchLogs(); // Initial fetch
        intervalId = setInterval(fetchLogs, fetchInterval);
    }

    function stopFetchingLogs() {
        clearInterval(intervalId);
    }

    function updateInterval() {
        const input = document.getElementById('intervalInput');
        const newInterval = parseInt(input.value) * 1000; // Convert to milliseconds
        if (isNaN(newInterval) || newInterval <= 0) {
            alert('请输入一个有效的时间间隔（秒）');
            return;
        }
        fetchInterval = newInterval; // Update to the new interval
        if (!isPaused) {
            stopFetchingLogs(); // Stop the previous interval
            startFetchingLogs(); // Start with the new interval
        }
    }

    function togglePause() {
        if (isPaused) {
            startFetchingLogs();
            pauseButton.textContent = '暂停';
        } else {
            stopFetchingLogs();
            pauseButton.textContent = '继续';
        }
        isPaused = !isPaused;
    }

    // Attach event listeners
    confirmButton.addEventListener('click', updateInterval);
    pauseButton.addEventListener('click', togglePause);

    // Start fetching logs initially
    startFetchingLogs();
</script>
</body>
</html>
